<template>
	<view class="gui-margin-x-middle gui-margin-top-middle">

		<view class="gui-bg-white gui-border-radius-large" style="margin-top: -46rpx;">
			<view v-if="dingjin_money>0" class=" gui-flex  gui-align-items-center gui-space-between gui-padding">
				<view class="gui-text">
					定金
				</view>
				<view class="gui-color-blue">￥{{format_money(dingjin_money)}}元</view>
			</view>

			<view v-if="gujia && base.uniacid == 5"
				class=" gui-flex  gui-align-items-center gui-space-between gui-padding">
				<view class="gui-text">
					预算
				</view>
				<view class="gui-color-blue"><input v-model="jb_yusuan" type="number" class="gui-text-right"
						placeholder="请输入预算" /></view>
			</view>

			<view v-if="money > 0 && false" class=" gui-flex  gui-align-items-center gui-space-between gui-padding">
				<view class="gui-text">
					订单金额
				</view>
				<view class="gui-color-blue">￥{{format_money(money)}}元</view>
			</view>

			<view v-if="yunfei > 0" class=" gui-flex  gui-align-items-center gui-space-between gui-padding">
				<view class="gui-text">
					运费
				</view>
				<view class="gui-color-blue">￥{{format_money(yunfei)}}元</view>
			</view>
			<view v-if="dingjin_money > 0" class="gui-color-blue gui-padding">&nbsp;&nbsp;&nbsp;{{base.dj_sm}}</view>
			<view v-if="discount>0" class=" gui-flex  gui-align-items-center gui-space-between gui-padding">
				<view class="gui-text">
					会员优惠
				</view>

				<view class="gui-color-blue">- ￥{{format_money(discount)}}元</view>
			</view>

			<view class="gui-bg-white gui-border-radius-large" @tap="open" v-if="yhq && coupons.length>0">
				<view class=" gui-flex  gui-align-items-center gui-space-between gui-padding">
					<view class="gui-text">
						优惠劵
					</view>

					<view class="gui-color-blue">- ￥{{format_money(yhq_money)}}元</view>
					<view class="gui-flex gui-align-items-center"><text
							class="gui-text gui-color-blue gui-text-small">{{yhq_id==0?coupons.length + '张可用':'已选择'}}</text><text
							class="gui-icons gui-block gui-color-gray gui-text">&#xe601;</text></view>
				</view>
			</view>


			<view v-if="max_jifen>0 && u_jifen > 0"
				class=" gui-flex  gui-align-items-center gui-space-between gui-padding">
				<view class="gui-text">
					兑换积分
				</view>
				<view class="gui-color-blue">- ￥{{format_money(jifen/base.jf_dikou)}}元</view>
				<gui-step-box :minNum="0" :maxNum="maxNum" :step="10"
					:inputClass="['gui-step-box-input','gui-border-radius', 'gui-bg-gray', 'gui-dark-bg-level-2']"
					:buttonClass="['gui-color-blue', 'gui-step-box-button']" @change="change" :value="0">
				</gui-step-box>
			</view>
			<view v-if="max_jifen>0" class="gui-text-small gui-margin gui-color-blue gui-text-right">
				可用{{u_jifen}}积分,最多使用{{max_jifen}}积分</view>

		</view>
		<view class="gui-bg-white gui-margin-top gui-border-radius-large" style="margin-top: -40rpx;">
			<view class="gui-flex gui-align-items-center gui-space-between gui-padding"
				v-if="(money - jifen/base.jf_dikou - yhq_money>0 || dingjin_money > 0) && base.zf_wx">

				<view class="gui-flex gui-align-items-center gui-justify-content-end">
					<image style="height: 60rpx; width: 60rpx;" mode="aspectFit" src="../../static/weixin_pay.png">
					</image>
					<text class="gui-text gui-primary-tet gui-margin-x">微信支付</text>
				</view>

				<gui-radio @change="payChange(1)" :checked="pay_type==1" :defaultClass="['gui-color-gray']"
					:checkedClass="['gui-bg-blue', 'gui-color-white']">
				</gui-radio>
			</view>
			<view v-if="base.yu_e" class="gui-flex gui-border-t gui-align-items-center gui-space-between gui-padding">

				<view class="gui-flex gui-align-items-center gui-justify-content-end">
					<image style="height: 60rpx; width: 60rpx;" mode="aspectFit" src="../../static/balance_pay.png">
					</image>
					<text class="gui-text gui-primary-tet gui-margin-x">余额支付</text>
					<view class="gui-text-small gui-primary-text">(可用余额：<text
							class="gui-color-blue">￥{{format_money(userinfo.u_money)}}</text>)</view>
				</view>
				<gui-radio @change="payChange(0)" :checked="pay_type==0" :defaultClass="['gui-color-gray']"
					:checkedClass="['gui-bg-blue', 'gui-color-white']">
				</gui-radio>
			</view>

			<view class="gui-flex gui-border-t gui-align-items-center gui-space-between gui-padding" v-if="base.zrdf">

				<view class="gui-flex gui-align-items-center gui-justify-content-end">
					<image style="height: 60rpx; width: 60rpx;" mode="aspectFit" src="../../static/ren_pay.png">
					</image>
					<text class="gui-text gui-primary-tet gui-margin-x">找人代付</text>
					<view class="gui-text-small gui-primary-text">(让其他人帮您支付此订单)</view>
				</view>
				<gui-radio @change="payChange(4)" :checked="pay_type==4" :defaultClass="['gui-color-gray']"
					:checkedClass="['gui-bg-blue', 'gui-color-white']">
				</gui-radio>
			</view>


			<view v-if="userinfo.qy_rz == 3 && qyzf"
				class="gui-flex gui-border-t gui-align-items-center gui-space-between gui-padding">

				<view class="gui-flex gui-align-items-center gui-justify-content-end">
					<image style="height: 60rpx; width: 60rpx;" mode="aspectFit" src="../../static/balance_pay.png">
					</image>
					<text class="gui-text gui-primary-tet gui-margin-x">企业支付</text>
					<view class="gui-text-small gui-primary-text"></view>
				</view>
				<gui-radio @change="payChange(3)" :checked="pay_type==3" :defaultClass="['gui-color-gray']"
					:checkedClass="['gui-bg-blue', 'gui-color-white']">
				</gui-radio>
			</view>
			<view v-if="base.zf_dsfzf"
				class="gui-flex gui-border-t gui-align-items-center gui-space-between gui-padding">

				<view class="gui-flex gui-align-items-center gui-justify-content-end">
					<image style="height: 60rpx; width: 60rpx;" mode="aspectFit" src="../../static/balance_pay.png">
					</image>
					<text class="gui-text gui-primary-tet gui-margin-x">第四方付</text>
					<view class="gui-text-small gui-primary-text"></view>
				</view>
				<gui-radio @change="payChange(5)" :checked="pay_type==5" :defaultClass="['gui-color-gray']"
					:checkedClass="['gui-bg-blue', 'gui-color-white']">
				</gui-radio>
			</view>
			<view v-if="base.zf_san_fnag_zf"
				class="gui-flex gui-border-t gui-align-items-center gui-space-between gui-padding">

				<view class="gui-flex gui-align-items-center gui-justify-content-end">
					<image style="height: 60rpx; width: 60rpx;" mode="aspectFit" src="../../static/balance_pay.png">
					</image>
					<text class="gui-text gui-primary-tet gui-margin-x">第三方付</text>
					<view class="gui-text-small gui-primary-text"></view>
				</view>
				<gui-radio @change="payChange(7)" :checked="pay_type==7" :defaultClass="['gui-color-gray']"
					:checkedClass="['gui-bg-blue', 'gui-color-white']">
				</gui-radio>
			</view>
			<!-- 在支付选项部分增加线下支付 ，-->
			<view v-if="base.zf_xxzf"
				class="gui-flex gui-border-t gui-align-items-center gui-space-between gui-padding">
				<view class="gui-flex gui-align-items-center gui-justify-content-end">
					<image style="height: 60rpx; width: 60rpx;" mode="aspectFit" src="../../static/balance_pay.png">
					</image>
					<text
						class="gui-text gui-primary-tet gui-margin-x">线下支付</text><!-- custom/pay.js，这里面要配置些东西，搜索支付传参 ，可看到，-->
					<view class="gui-text-small gui-primary-text"></view>
				</view>
				<gui-radio @change="payChange(6)" :checked="pay_type==6" :defaultClass="['gui-color-gray']"
					:checkedClass="['gui-bg-blue', 'gui-color-white']">
				</gui-radio>
			</view>
		</view>
		<view class="gui-text-center gui-text gui-margin-top">
			<text>实付款：</text><text class=" gui-color-blue gui-margin-x"
				style="font-size: 40rpx;font-weight: 600;">￥{{dingjin_money>0?dingjin_money:format_money(parseFloat(money) + parseFloat(yunfei) - parseFloat(jifen/base.jf_dikou) - parseFloat(yhq_money))}}</text><text
				class="gui-text-small gui-color-gray"
				v-if="discount + jifen/base.jf_dikou + yhq_money>0">(共优惠：{{format_money(parseFloat(discount) + parseFloat(jifen/base.jf_dikou) + parseFloat(yhq_money))}}元)</text>
		</view>

		<view>
			<slot />
		</view>

		<view class="gui-dark-bg-level-3 gui-padding gui-margin-top">
			<button type="default" class="gui-button gui-bg-blue gui-noborder" @tap="confirm"
				style="border-radius:50rpx;">
				<text class="gui-color-white gui-button-text">确认支付</text>
			</button>
		</view>

		<gui-popup ref="popup" position="bottom">
			<view class="gui-bg-gray gui-padding">
				<view v-for="(item, index) in coupons" :key="index" class="gui-margin-top" :data-number="item.number"
					:data-btn="item.btn" @tap="getIt(index)">
					<gui-coupons :coupon="item"></gui-coupons>
				</view>
			</view>
		</gui-popup>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		name: "hyb-pay",
		props: {
			money: {
				type: Number,
				default: 0
			},
			x_jifenstatus: {
				type: Number,
				default: 0
			},
			yhq: {
				type: Number,
				default: 0
			},

			discount_money: {
				type: Number,
				default: 0
			},

			dingjin_money: {
				type: Number,
				default: 0
			},


			yunfei: {
				type: Number,
				default: 0
			},



			max_jifen: {
				type: Number,
				default: 0
			},

			zhekou: {
				type: Boolean,
				default: false
			},

			yhq: {
				type: Boolean,
				default: false
			},

			gujia: {
				type: Boolean,
				default: false
			},

			qyzf: {
				type: Boolean,
				default: true
			},



		},
		computed: {
			base: () => {
				return uni.storage.get("base");
			},
			userinfo: () => {
				return uni.storage.get("userinfo");
			}
		},
		mounted() {
			const baseValue = this.base;
			console.log('base的值为:', baseValue);
		},
		watch: {
			discount_money(val) {
				if (val > 0) {
					this.discount = this.discount_money;
					this.setMaxNum();
				}
			},
			max_jifen(val) {
				if (val) {
					this.setMaxNum();
				}
			},

			money(val) {
				console.log(val)
				if (val == 0) {
					this.pay_type = 0;
				}
			}
		},
		data() {
			return {
				pay_type: 1,
				userinfo: {},
				maxNum: 0,
				jifen: 0,
				discount: 0,
				list: [],
				coupons: [],
				coupon_index: -1,
				yhq_id: 0,
				yhq_money: 0,
				u_jifen: 0,
				jb_yusuan: '',
				isSubmitting: false // 防止重复提交的标志
			};
		},

		created() {
			const baseValue = this.base;
			if (baseValue && baseValue.zf_wx) {
				this.pay_type = 1;
			} else if (baseValue && baseValue.yu_e) {
				this.pay_type = 0;
			} else if (baseValue && baseValue.zf_dsfzf) {
				this.pay_type = 5;
			}
			if (this.$store.state.base.show_base.sf_yhq) {
				uni.gPost("youhuiquan/my/list", {
					y_style: this.y_style
				}).then((list) => {
					this.list = list;
					list.forEach((item) => {
						this.coupons.push({
							color: '#FF8830',
							height: '180rpx',
							unit: "￥",
							number: item.youhuiquan.y_money,
							txt: item.youhuiquan.y_shuoming,
							title: item.youhuiquan.y_name,
							desc: "有效期至 " + item.y_endtime,
							btn: "使用",
							drawed: ""
						})
					})
				})
			}

			// 检查是否禁用接口调用
			if (this.$store.state.base.show_base && this.$store.state.base.show_base.jy_bb === 1) {
				// 当jy_bb=1时，不调用接口，使用缓存数据
				this.userinfo = uni.storage.get("userinfo") || {};
				this.setMaxNum();
				if (this.userinfo.uniacid == 48 && this.userinfo.u_shangjia) {
					this.u_jifen = 0;
				} else {
					this.u_jifen = this.userinfo.u_jifen || 0;
				}
			} else {
				// 正常调用接口
				uni.gPost("user/info").then((info) => {
					uni.storage.set("userinfo", info);
					this.userinfo = info;
					// 如果用户是商家的话就不允许用积分
					// if (this.zhekou==0 && this.userinfo.huiyuan) {
					// 	this.discount = this.userinfo.huiyuan.h_zhekou * this.money;
					// }


					this.setMaxNum();
					if (info.uniacid == 48 && info.u_shangjia) {
						this.u_jifen = 0;
					} else {
						this.u_jifen = info.u_jifen;
					}
					// if (this.discount_money > 0) {
					// 	this.discount = this.discount_money;
					// }
					// this.maxNum = parseInt(Math.min(this.userinfo.u_jifen, this.max_jifen));
				})
			}
		},
		methods: {


			setMaxNum() {
				if (this.userinfo) {
					let maxNum = parseInt(Math.min(this.userinfo.u_jifen, this.max_jifen));
					maxNum = Math.min(maxNum, parseInt(this.money / this.base.jf_dikou));
					this.maxNum = maxNum;
				}
			},

			open() {
				if (this.coupons.length > 0) {
					this.$refs.popup.open();
				}
			},
			format_money(val) {
				return parseFloat(val).toFixed(2);
			},
			change(val) {
				this.jifen = val[0];
			},
			payChange(type) {
				this.pay_type = type;
				if (type == 0 && this.userinfo.u_money < (this.money - this.jifen / this.base.jf_dikou - this.yhq_money)) {
					uni.showToast({
						title: "可用余额不足,请先充值",
						icon: "none"
					})
					this.$nextTick(() => {
						this.pay_type = 1;
					})
				}
				if (type == 1) {
					this.pay_type = -1;
					this.$nextTick(() => {
						this.pay_type = 1;
					})
				}
				if (type == 3) {
					this.pay_type = -1;
					this.$nextTick(() => {
						this.pay_type = 3;
					})
				}
				if (type == 5) {
					this.pay_type = -1;
					this.$nextTick(() => {
						this.pay_type = 5;
					})
				}
				if (type == 4) {
					this.pay_type = -1;
					this.$nextTick(() => {
						this.pay_type = 4;
					})
				}
				if (type == 6) {
					this.pay_type = -1;
					this.$nextTick(() => {
						this.pay_type = 6;
					})
				}

				if (type == 7) {
					this.pay_type = -1;
					this.$nextTick(() => {
						this.pay_type = 7;
					})
				}
			},
			query() {
				this.coupons = [];
			},
			confirm() {
				// 防止重复提交
				if (this.isSubmitting) {
					uni.showToast({
						title: "正在处理中，请勿重复提交",
						icon: 'none'
					});
					return;
				}

				if (this.gujia) {
					let jb_yusuan = parseInt(this.jb_yusuan);
					if ((isNaN(jb_yusuan) || jb_yusuan <= 0) && this.base.uniacid == 5) {
						uni.showToast({
							title: "请填写预算",
							icon: "none"
						})
						return;
					}
				}

				// 设置提交状态
				this.isSubmitting = true;

				if (this.pay_type == 4) {
					uni.$once("choose_user", (user) => {
						this.$emit("confirm", this.pay_type, this.jifen, this.yhq_id, this.jb_yusuan, user.u_id)
						// 重置提交状态
						this.isSubmitting = false;
					})
					// uni.navigateTo({
					// 	url: '/hyb_o2o/user/list/list?tag=1'
					// })
				} else if (this.pay_type == 6) { // 新增线下支付跳转
					this.$emit("confirm", this.pay_type, this.jifen, this.yhq_id, this.jb_yusuan)
					// 重置提交状态
					this.isSubmitting = false;
				} else {
					this.$emit("confirm", this.pay_type, this.jifen, this.yhq_id, this.jb_yusuan)
					// 重置提交状态
					this.isSubmitting = false;
				}
			},

			getIt(index) {
				if (this.coupon_index > -1) {

					if (this.coupon_index == index) {
						if (this.coupons[this.coupon_index].color == "#cccccc") {
							this.coupons[this.coupon_index].color = "#FF8830";
							this.coupons[this.coupon_index].btn = "使用";
							this.coupon_index = -1;
							this.yhq_id = 0;
							this.yhq_money = 0;
							this.$refs.popup.close();
							return;
						} else {
							this.coupons[this.coupon_index].color = "#cccccc";
							this.coupons[this.coupon_index].btn = "已选择";
						}
					} else {
						this.coupons[this.coupon_index].color = "#FF8830";
						this.coupons[this.coupon_index].btn = "使用";
					}


				}
				let item = this.list[index];
				this.coupons[index].color = "#cccccc";
				this.coupons[index].btn = "已选择";
				this.yhq_id = item.id;
				this.yhq_money = item.youhuiquan.y_money;
				this.coupon_index = index;
				this.$refs.popup.close();
			}
		}
	}
</script>

<style>
</style>